<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<head>
    <style>
        #_canvas {
            z-index: 2000;
            /* position:absolute; */
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
            /* background-color: #f0f0f0; */
        }

        #_canvas2 {
            z-index: -1001;
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
            /* background-color: #f0f0f0; */
        }

        #_canvas3 {
            z-index: 2100;
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f0f0;
            display: none;
        }

        #right #left {
            float: left;
        }
    </style>
    <script type="text/javascript" src="engine.js"></script>
    <script type="text/javascript" src="examples/common.js"></script>
    <script type="text/javascript" src="examples/arrow.js"></script>
    <script type="text/javascript" src="examples/battle.js"></script>
    <script type="text/javascript" src="examples/collision.js"></script>
    <script type="text/javascript" src="examples/gravity.js"></script>
    <script type="text/javascript" src="examples/group.js"></script>
    <script type="text/javascript" src="examples/jump.js"></script>
    <script type="text/javascript" src="examples/mousethrow.js"></script>
    <script type="text/javascript" src="examples/move2click.js"></script>
    <script type="text/javascript" src="examples/polygoncollision.js"></script>
    <script type="text/javascript" src="examples/wallcollision.js"></script>
    <script type="text/javascript" src="examples/shot.js"></script>
    <script type="text/javascript" src="examples/timer.js"></script>
    <script type="text/javascript" src="examples/health.js"></script>
    <script type="text/javascript" src="tank/data/tank.js"></script>
    <script type="text/javascript" src="examples/tiledread.js"></script>
    <script type="text/javascript" src="examples/animate.js"></script>
    <script type="text/javascript" src="examples/resourceloading.js"></script>
    <script type="text/javascript" src="examples/mydrawing.js"></script>
    <script type="application/javascript">

        function ready() {
        }
        let engine;
        function select(e) {
            let canvas = document.getElementById("_canvas3");
            canvas.style.display = 'none';
            if (engine) {
                engine.destory();
            }
            window.setTimeout(function () {
                if (e.value) {
                    engine = window[e.value]();
                }
            }, 100);
        }
        function bgrender() {
            let canvas2 = document.getElementById('_canvas2');
            let ctx2 = canvas2.getContext('2d');
            let bgLayer = new Layer(ctx2);
            bgLayer.name = 'bgLayer';
            bgLayer.interval = 5000;
            let bgObj = new BackgroundObject();
            bgObj.loadImage('assets/images/Background.jpg');
            bgObj.fillType = FILL_TYPE_TILE;
            bgLayer.addObject(bgObj);
            engine.addLayer(bgLayer);
        }
    </script>
</head>

<body onload="ready();">
    <div>
        <div id="left">
            <canvas id="_canvas" width='1200' height='700'></canvas>
            <canvas id="_canvas2" width='1000' height='700'></canvas>
            <canvas id="_canvas3" width='300' height='300'></canvas>
        </div>
        <div id="right">
            <select id="pet-select" onchange="select(this)">
                <option value="">--Please choose an option--</option>
                <option value="boom">战场</option>
                <option value="group">组</option>
                <option value="collision">碰撞检测</option>
                <option value="wallCollision">碰撞检测2</option>
                <option value="polygonCollision">多边形碰撞检测</option>
                <option value="arrow">多边形、连接、坐标</option>
                <option value="moveToClick">移动到点击位置</option>
                <option value="gravity">重力</option>
                <option value="mouseThrow">抛出去</option>
                <option value="jump">跳跃台阶</option>
                <option value="shotGame">射击游戏</option>
                <option value="numberCountdown">倒计时数字</option>
                <option value="HP">生命值</option>
                <option value="readtiled">加载Tiled地图</option>
                <option value="animate">动画切换</option>
                <option value="resourceLoading">资源预加载</option>
                <option value="drawReact">画矩形</option>
                <option value="drawArc">画圆形</option>
                <option value="drawArc2">画圆形2</option>
                <option value="drawArrow">画箭头</option>
                <option value="drawingArrows">画很多箭头</option>
            </select>
        </div>
    </div>
</body>
<script type="application/javascript">

    function fullsize() {
        let canvas = document.getElementById('_canvas');
        canvas.setAttribute("width", window.innerWidth);
        canvas.setAttribute("height", window.innerHeight);
    }

    // 监听画面变化，更新渲染画面
    window.addEventListener("resize", () => {
        fullsize();
    });
</script>

</html>